<template>
	<div>
		<div id="login-box">
			<h1 style="font-family: 楷体,serif;font-size: 50px">缺陷管理系统</h1>
			<div class="form">
				<div class="item">
					<i class="fa fa-user" aria-hidden="true"></i>
					<input type="text" placeholder="请输入账号" v-model="param.account">
				</div>
				<div class="item">
					<i class="fa fa-key" aria-hidden="true"></i>
					<input type="password" placeholder="请输入密码" v-model="param.password" @keyup.enter="login()">
				</div>
			</div>
			<button @click="login()" style="cursor: pointer;">登录</button>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
	  name: "Login",
	  data() {
		return {
		  param: {
			account: "",
			password: "",
		  },
		  bool: "",
		}
	  },
	  methods: {
		login() {
		  var _this = this;
		  $.ajax({
			url: "http://localhost/user/login",
			type: "get",
			data: _this.param,
			dataType: "json",
			success: function (data) {
			  //将token存储到localStorage
			  if(data.code=="1001"){
				  alert("账号或密码错误！")
			  }else{
				localStorage.setItem("token", data.obj);
				_this.$router.push({
								path: "/main"
				});  
			  }
			
			}
		  })
		},
	  },
	  beforeCreate:function() {
	       document.getElementsByTagName("body")[0].className="bodyBg";
	  }, //
	  beforeDestroy:function() {
	      document.body.removeAttribute("class","bodyBg");
	  }
	}
</script>

<style>
	#login-box {
		width: 30%;
		height: auto;
    margin: 10% auto 0;
    text-align: center;
		background: #00000080;
		padding: 100px 50px;
	}
	
	#login-box h1 {
		color: #ffffff;
	}
	
	#login-box .form {
		margin-top: 50px;
	}
	
	#login-box .form i {
		font-size: 18px;
		color: #ffffff;
	}
	
	#login-box .form .item {
		margin-top: 15px;
	}
	
	#login-box .form .item input {
		width: 180px;
		font-size: 18px;
		border: 0;
		border-bottom: 2px solid #ffffff;
		padding: 5px 10px;
		background: #ffffff00;
		color: #ffffff;
	}
	
	#login-box button {
		margin-top: 30px;
		width: 100px;
		height: 40px;
		font-size: 20px;
		font-weight: 700;
		border: 0;
		background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #ddbaee 0%, #e8a8ee 33%, #b8d9f8 66%, #59bcf5 100%);
		border-radius: 15px;
	}
	
/* 	body {
		background: url(../../public/img/111555.jpeg);
		background-repeat: no-repeat;
		background-size: 100% auto;
	} */
	
	input {
		border: none;
		outline: medium;
	}
	
	.bodyBg{
    background: url(../../public/img/111555.jpeg) no-repeat;
    background-size: 100% auto;
	}
</style>